<template>
	<!-- 筛选区 -->
	<view>
		<view class="prefer-posi">
				<view class="delica">
					<view class="delica-list delica-grow" @click="multiple()">
						<text>{{synthesize}}</text>
						<image src="../../static/img/paixu.png" mode="widthFix"></image>
					</view>
					<view class="delica-grow" @click="sales()">销量高</view>
					<view class="delica-grow" @click="sales()">速度快</view>
					<view class="delica-grow" @click="sales()">津贴联盟</view>
					<view class="delica-list delica-right" @click="screen()">
						<text>筛选</text>
						<image src="../../static/img/shaixuan.png" mode="widthFix"></image>
					</view>
				</view>
			<view class="sortlist" v-if="drop">
				<block v-for="(item,index) in sortlist" :key="index">
					<text :class="{activeb:index == num}" @click="sortClick(index,item.name)">{{item.name}}</text>
				</block>
			</view>
			<view class="sortlist sortlist-view" v-if="sortmen">
				<block v-for="(item,index) in screendata" :key="index">
					<view>
						<view class="sortlist-title">{{item.title}}</view>
						<view class="sortlist-flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="choice">{{itemdata.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<block v-for="(item,index) in person" :key="index">
					<view>
						<view class="sortlist-title">{{item.title}}</view>
						<view class="sortlist-flex">
							<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
								<text class="choice">{{itemdata.name}}</text>
							</block>
						</view>
					</view>
				</block>
				<view class="sortlist-buttom">
					<text>清空</text>
					<text>完成</text>
				</view>
			</view>
		</view>
		<view class="yin" v-if="ying" @click="backClick()"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"synthesize": '综合排序',
				drop: false,
				sortmen: false,
				ying: false,
				num: 0,
				sortlist: [{
						"name": '综合排序',
						"screen": '_id',
						"nums": 1
					},
					{
						"name": '起送价最低',
						"screen": 'delivering',
						"nums": 1
					},
					{
						"name": '配送费最低',
						"screen": 'physical',
						"nums": 1
					},
					{
						"name": '人均高到低',
						"screen": 'capita',
						"nums": -1
					},
					{
						"name": '人均低到高',
						"screen": 'capita',
						"nums": 1
					}
				],
				screendata: [{
					"title": '商家特色(可多选)',
					"datas": [{
							"id": 1,
							"sign": 'duration',
							"name": '配送最快'
						},
						{
							"id": 1,
							"sign": 'deliver',
							"name": '0元配送'
						},
						{
							"id": 1,
							"sign": 'physi',
							"name": '免费配送'
						}
					],
				}],
				person: [{
					"title": '人均价',
					"datas": [{
							"name": '20元以下',
							"per": {
								"$lt": 20
							},
						},
						{
							"name": '20-40元',
							"per": {
								"$lte": 40,
								"$gte": 20
							},
						},
						{
							"name": '40元以上',
							"per": {
								"$gt": 40
							}
						}
					],
				}]
			}
		},
		methods: {
			//综合排序
			multiple() {
				this.drop = true
				this.sortmen = false
				this.backOne()
			},
			//综合排序替换
			sortClick(index, name) {
				this.synthesize = name
				this.num = index
				this.backClick()
			},
			salec(){
				this.backClick()
			},
			screen(){
				this.drop = false
				this.sortmen = true
				this.backOne()
			
			},
			backOne(){
				setTimeout(()=>{
					this.ying = true
				},310)
			},
			backClick(){
				this.ying = false
				this.drop = false
				this.sortmen = false
			}
		}
	}
</script>

<style lang="scss">
	
	.delica {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		height: 70rpx;
		padding: 0 10rpx;

		image {
			width: 35rpx;
			height: 30rpx;
			display: block;

		}
	}

	.delica-list {
		display: flex;
		align-items: center;
	}

	.delica-right {
		justify-content: flex-end;
		flex-grow: 5;
	}

	.delica-grow {
		flex-grow: 1;
	}

	.prefer-posi {
		position: absolute;
		right: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}

	.sortlist {
		background: #ffffff;

		text {
			padding: 0 15px;
			display: block;
			font-size: 30rpx;
			height: 70rpx;
			border-top: 1rpx solid #ededed;
		}


	}

	.activeb {
		color: #FFC125 !important;
	}

	.sortlist-view {
		height: 700rpx;
		overflow: hidden;
		overflow-y: scroll;
		position: relative;


	}

	.sortlist-title {
		padding: 0 15rpx;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.choice {
		font-size: 28rpx;
		background: #F8F8F8;
		height: 55rpx;
		line-height: 55rpx;
		color: #666666;
		width: calc((100%/3)-15rpx) !important;
		margin: 7.5px;
		text-align: center;
		display: block;
		border-radius: 5rpx;
	}

	.sortlist-flex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.sortlist-buttom {
		background: #ffffff;
		height: 80rpx;
		border-top: 1prx solid #e4e4e4;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		text {
			flex-grow: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}

		text:nth-child(1) {
			border-right: 1rpx solid #e4e4e4;
		}

		text:nth-child(2) {
			background: $shop-color;
		}
	}

	.yin {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
